<template>
	<view class="music_card_box display_flex_between">
		<view class="music_card_left display_flex_seart" @click="showPlayPageClick">
			<view :class="'music_card_poser '+(isPlay?'active':'')">
				<image class="music_card_poser_d" src="/static/cd.png" mode=""></image>
				<image class="music_card_poser_g" :src="nowPlaySong.picUrl" mode=""></image>
			</view>
			<view class="music_card_name">{{nowPlaySong.name}}</view>
		</view>
		<view class="music_card_right display_flex_center">
			<view class="music_card_play" @click="playSong">
				<u-icon name="pause-circle" size="26" v-if="isPlay"></u-icon>
				<u-icon name="play-circle" size="26" v-else></u-icon>

			</view>
			<view class="music_card_list" @click="showSongList">
				<u-icon name="list-dot" size="26"></u-icon>
			</view>
		</view>
		
		
		<x-play-list @songItemClick="playSong" v-if="showPlayList"></x-play-list>
		<x-play-page @playSong="playSong" v-if="showPlayPage" @previousSong="previousSongClick" @nextSong="nextSongClick"></x-play-page>
	</view>

</template>

<script>
	var app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		name: "x-play-card",
		data() {
			return {}
		},
		computed:{
			...mapState(['nowPlaySong','showPlayPage','showPlayList','showPlayCard',"nowPlayUrl","isPlay"])
		},
		mounted() {
			let innerAudioContextEle = app.globalData.innerAudioContext;
			let _this = this;
			innerAudioContextEle.onPlay(() => {
				_this.setIsPlay(true);
				let duration = parseInt(innerAudioContextEle.duration);
				let currentTime = parseInt(innerAudioContextEle.currentTime);
				let songInfo = {
					nowDuration: currentTime,
					duration: duration,
					durationStr: uni.$sToHs(duration),
					nowDurationStr: uni.$sToHs(currentTime)
				};
				
				_this.setNowPlayInfo(songInfo);
				console.log('onPlay');
			});
			innerAudioContextEle.onEnded(() => {
				_this.setNowPlayInfo({
					nowDuration: 0, //当前播放的时间
					duration: 0, //总时间
					durationStr: "00:00", //总时间如00:34
					nowDurationStr: "00:00", //当前播放的时间如00:12
				});
				innerAudioContextEle.startTime = 0;
				innerAudioContextEle.seek(0);
				_this.setIsPlay(false);
				_this.nextSongClick();
				console.log('onEnded');
			});

			// innerAudioContextEle.onTimeUpdate(() => {
			// 		let duration = parseInt(innerAudioContextEle.duration);
			// 		let currentTime = parseInt(innerAudioContextEle.currentTime);
			// 		let songInfo = {
			// 			nowDuration: currentTime,
			// 			duration: duration,
			// 			durationStr: uni.$sToHs(duration),
			// 			nowDurationStr: uni.$sToHs(currentTime)
			// 		};
			// 		_this.setNowPlayInfo(songInfo);
			// 		console.log("onTimeUpdate");
			// });

			innerAudioContextEle.onStop(() => {
				_this.setNowPlayInfo({
					nowDuration: 0, //当前播放的时间
					duration: 0, //总时间
					durationStr: "00:00", //总时间如00:34
					nowDurationStr: "00:00", //当前播放的时间如00:12
				});
				innerAudioContextEle.startTime = 0;
				innerAudioContextEle.seek(0);
				_this.setIsPlay(false);
				console.log('音频停止事件onStop');
			});
			innerAudioContextEle.onPause(() => {
				_this.setIsPlay(false);
				console.log("暂停播放onPause");
			});
			innerAudioContextEle.onWaiting(() => {
				innerAudioContextEle.pause();
				setTimeout(()=>{
					innerAudioContextEle.play();
				},500)
				console.log("onWaiting");
			});
			innerAudioContextEle.onCanplay(() => {
				innerAudioContextEle.play();
				console.log("onCanplay");
			});
			innerAudioContextEle.onError((res) => {
				console.log("播放错误onError");
				console.log(res);
			});
		},
		methods: {
			...mapMutations(['setShowPlayList', 'setShowPlayPage', 'setShowPlayCard', 'setNowPlaySong', 'setNowPlayInfo', 'setIsPlay', 'initNowPlaySongList','moreNowPlaySongList',"setNowPlayUrl", "previousSong", "nextSong"]),
			previousSongClick(){
				this.previousSong();
				this.setIsPlay(false);
				app.globalData.innerAudioContext.stop();
				this.initPlayUrl();
			},
			nextSongClick(){
				this.nextSong();
				this.setIsPlay(false);
				app.globalData.innerAudioContext.stop();
				this.initPlayUrl();
			},
			showSongList() {
				this.setShowPlayList(true);
			},
			showPlayPageClick() {
				this.setShowPlayPage(true);
				if (!this.isPlay) {
					this.initPlayUrl();
				}
			},
			
			playSong(){
				if (this.nowPlayUrl) {
					if (this.isPlay) {
						this.setIsPlay(false);
						app.globalData.innerAudioContext.pause();
					} else {
						this.setIsPlay(true);
						app.globalData.innerAudioContext.play();
					}
				} else {
					this.initPlayUrl();
				}
			},
			
			initPlayUrl(){
				let _this = this;
				let songItem = _this.nowPlaySong;
				uni.$ajax({
					url: '/song/url/v1?level=lossless&id='+songItem.id,
					type: "get",
					}).then(res => {
						let songUrl = res.data[0].url || "";
						if (songUrl) {
							let innerAudioContextEle = app.globalData.innerAudioContext;
							innerAudioContextEle.src = songUrl;
							innerAudioContextEle.startTime = 0;
							innerAudioContextEle.seek(0);
							let duration = parseInt(innerAudioContextEle.duration);
							let currentTime = parseInt(innerAudioContextEle.currentTime);
							let songInfo = {
								nowDuration: currentTime,
								duration: duration,
								durationStr: uni.$sToHs(duration),
								nowDurationStr: uni.$sToHs(currentTime)
							};
							innerAudioContextEle.play();
							_this.setNowPlayUrl(songUrl);
							_this.setNowPlayInfo(songInfo);
							_this.setIsPlay(true);
						}
					})
			},
		}
	}
</script>

<style>
	.music_card_box {
		width: 100%;
		max-width: 650px;
		height: 100rpx;
		background-color: #fff;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 666;
	}

	.music_card_left {
		width: calc(100% - 160rpx);
		height: 100%;
	}

	.music_card_poser {
		width: 100rpx;
		position: relative;
	}

	.music_card_poser.active {
		animation: rotate 2s linear infinite;
	}

	.music_card_poser_d {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		inset: 0;
		margin: auto;
		z-index: 1;
	}

	.music_card_poser_g {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		position: absolute;
		inset: 0;
		margin: auto;
		z-index: 2;
	}

	.music_card_name {
		flex: none;
		width: calc(100% - 120rpx);
		box-sizing: border-box;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.music_card_right {
		width: 160rpx;
		height: 100%;
	}

	.music_card_play {
		margin-right: 10rpx;
	}
</style>